<template>
  <div class="index-form form-contain">
    <div class="index-right">
       <div class="index-spbanner">什么是视频广告？</div>
      <div class="index-spdetalis">
      视频广告是指在移动设备内进行的插播视频的模式。分为传统贴片广告和In-App视频广告。
      </div>
      <div class="spadvertising">
        您的广告可以展示在这里
      </div>
      <div class="spfriends">
         <img src="static/images/图层 4@3x.png">
         <span>频道信息流</span>
           <img src="static/images/sp1.png">
            <img src="static/images/sp2.png">
      </div>
        <div class="spfriendstwo">
         <img src="static/images/图层 4@3x.png">
         <span>视频信息流</span>
           <img src="static/images/sp3.png">
            <img src="static/images/sp4.png">
      </div>
      <div class="spfriendsthree">
         <img src="static/images/图层 4@3x.png">
         <span>暂停广告</span>
           <img src="static/images/sp5.png">
      </div>
      <div class="spfriendsfour">
         <img src="static/images/图层 4@3x.png">
         <span>视频浮层</span>
            <img src="static/images/sp6.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      imgList: [],
      form: {
      }
    }
  },
  created () {
  },
  methods: {}
}
</script>

<style lang="less">
.index-form{
  .el-upload-list__item,
  .el-upload--picture-card{
    height: 100px;
    width: 200px;
  }
  .el-upload--picture-card{
    line-height: 100px;
  }
  .index-left{
    float: left;
    width: 10%;
    p{
      color: #101010;
      text-align: right;
      line-height: 200px;
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
   .index-spbanner{
    width:12.5625rem;
height:.8125rem;
font-size:.875rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
letter-spacing:.0235rem;
text-align: center;
  }
  .index-spdetalis{
    width:21rem;
height:2.125rem;
font-size:.75rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
  }
  .spadvertising{
    width:8.875rem;
height:.6875rem;
font-size:.625rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .6375rem;
text-align: center;

  }
  .spfriends{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 42.5%;
    top: 10.6rem;
    }
    img:nth-child(3){
      width:3.875rem;
height:6.8125rem;
display:inline-block;
    margin-left: 7.32rem;
margin-top: .9375rem
    }
       img:nth-child(4){
     width:3.875rem;
height:6.8125rem;
display:inline-block;
margin-left: 2.5rem;
margin-top: .9375rem;
    }
  }
  .spfriendstwo{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 42.5%;
    top:21.5rem;
    }
    img:nth-child(3){
      width:3.875rem;
height:6.8125rem;
display:inline-block;
    margin-left: 7.18rem;
margin-top: .9375rem
    }
       img:nth-child(4){
     width:3.875rem;
height:6.8125rem;
display:inline-block;
margin-left: 2.5rem;
margin-top: .9375rem;
    }
  }
  .spfriendstwo{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 42.5%;
    top:21.5rem;
    }
    img:nth-child(3){
      width:3.875rem;
height:6.8125rem;
display:inline-block;
    margin-left: 7.18rem;
margin-top: .9375rem
    }
       img:nth-child(4){
     width:3.875rem;
height:6.8125rem;
display:inline-block;
margin-left: 2.5rem;
margin-top: .9375rem;
    }
}
 .spfriendsthree{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
       left: 43.5%;
    top: 32.4rem;
    }
    img:nth-child(3){
    width:10.1875rem;
height:5.4375rem;
display:block;
margin: 0 auto;
margin-top: .9375rem;
    }
    }
     .spfriendsfour{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
       left: 43.5%;
    top: 41.7rem;
    }
    img:nth-child(3){
    width:10.1875rem;
height:5.4375rem;
display:block;
margin: 0 auto;
margin-top: .9375rem;
    }
    }
  }

</style>
